<template>
    <view
        class="center-top"
        :style="{
            backgroundImage: 'url(' + styleBgImage + ')',
        }"
    >
        <view class="top-content">
            <view class="avatar">
                <u-image
                    :src="
                        userData.is_login
                            ? userData.user_info?.avatar
                            : '/static/avatar.png'
                    "
                    width="50"
                    height="50"
                    shape="circle"
                ></u-image>
            </view>
            <view class="login">
                <view class="text" v-if="userData.is_login">{{
                    userData.user_info?.nickname
                        ? userData.user_info?.nickname
                        : userData.user_info?.account
                }}</view>
                <u-button
                    class="btn"
                    size="normal"
                    type="info"
                    plain
                    shape="circle"
                    text="点击登录"
                    @click="itemClick('/pages/login/login')"
                    v-else
                ></u-button>
            </view>
        </view>
    </view>
    <view class="center-content">
        <view class="card">
            <u-row justify="space-between" gutter="10">
                <u-col span="6">
                    <view class="card-item">
                        <u-image
                            src="/static/plugin_icon.png"
                            width="50"
                            height="50"
                            shape="circle"
                        ></u-image>
                        <view class="text">插件市场</view>
                    </view>
                </u-col>
                <u-col span="6">
                    <view class="card-item">
                        <u-image
                            src="/static/gitee_icon.png"
                            width="50"
                            height="50"
                            shape="circle"
                        ></u-image>
                        <view class="text">Gitee地址</view>
                    </view>
                </u-col>
            </u-row>
        </view>
        <view
            class="list"
            :class="
                userData.nav.style['service_style'] == 1
                    ? 'horizontal'
                    : 'vertical'
            "
        >
            <view
                class="list-item"
                v-for="item in userData.nav.list"
                :key="item.id"
                @click="itemClick(item.link)"
                :class="`w-nav-${userData.nav.style['service_count']}`"
            >
                <u-image
                    v-if="item.icon"
                    :src="getUrl(item.icon)"
                    class="mr-2"
                    width="24"
                    height="24"
                    shape="circle"
                ></u-image>
                <view class="text">{{ item.name }}</view>
                <u-icon
                    v-if="userData.nav.style['service_style'] == 2"
                    name="arrow-right"
                ></u-icon>
            </view>
        </view>
        <banner
            :list="userData.image.list"
            :style="userData.image.style"
            class="mt-2 mr-[5px] ml-[5px]"
        />
    </view>
    <tabbar></tabbar>
</template>

<script setup lang="ts">
import { reactive, computed } from "vue";
import useUserStore from "@/stores/user";
import { getUserInfo, userCenterStyle } from "@/api/user";
import { storeToRefs } from "pinia";
import { useRoute } from "@/hooks/useRoute";
import { onShow } from "@dcloudio/uni-app";
import { getUrl } from "@/utils/common";

const userData = reactive({
    user_info: null,
    is_login: false,
    nav: {
        list: [],
        style: {},
    },
    image: {
        list: [],
        style: {},
    },
    info: {
        style_identify: "",
        style_color: "",
    },
});

const styleBgImage = computed(() => {
    const modules:any = import.meta.glob('/src/static/home_top_*.png', { eager: true });
    return userData.info.style_identify ? modules['/src/static/home_top_' + userData.info.style_identify + '.png'].default : "none";
});

const userStore = useUserStore();
const { isLogin } = storeToRefs(userStore);

const getUserData = async () => {
    if (isLogin.value) {
        userData.is_login = true;
        const res = await getUserInfo();
        userData.user_info = res;
    }
};

const userUserStyle = async () => {
    const res = await userCenterStyle();
    userData.nav = res.nav;
    userData.image = res.image;
    userData.info = res.info;
};

const itemClick = (url) => {
    useRoute().jumpTo({ url: url });
};

onShow(() => {
    getUserData();
    userUserStyle();
});
</script>

<style lang="scss" scoped>
page {
    background-color: white;
}

.center-top {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 200px;
    background-position: 0% 0%;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .top-content {
        display: flex;
        align-items: center;
        padding: 6px 15px 60px 20px;

        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        .login {
            margin-left: 10px;
            padding: 4px;

            .text {
                font-size: 16px;
                color: white;
                line-height: 40px;
                padding-left: 5rpx;
            }

            .btn {
                background-color: transparent;
                color: white;
                width: 80px;
            }
        }
    }
}

.center-content {
    position: absolute;
    left: 0px;
    top: 130px;
    z-index: 0;
    margin: 0px 10px;
    width: calc((100% - 10px) - 10px) !important;

    .card {
        .card-item {
            margin: 5px;
            padding: 5px;
            background-color: rgb(255, 255, 255);
            overflow: hidden;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-direction: column;
            text-align: center;
            position: relative;
            background-position: center;
            background-repeat: no-repeat;
            box-shadow: 0 2px 6px rgba(26, 26, 26, 0.15);

            .text {
                margin-top: 3px;
                font-size: 14px;
            }
        }
    }

    .list {
        margin: 10px 5px 5px;
        width: calc((100% - 5px) - 5px) !important;
        overflow: hidden;
        border-radius: 6px;
        box-shadow: rgb(31 31 31 / 16%) 0px 1px 3px;
        display: flex;
        flex-wrap: wrap;
    }

    .list.vertical {
        .list-item {
            width: 100%;
            position: relative;
            display: flex;
            padding: 10px;
            justify-content: flex-start;
            align-content: center;
            align-items: stretch;
            background-color: white;

            a {
                display: flex;
            }

            .text {
                flex: 1;
                padding: 2px 0 2px 6px;
                display: flex;
                justify-content: space-between;
                flex-direction: row !important;
                align-items: center;
                font-size: 14px;
            }

            &::after {
                content: " ";
                width: 200%;
                height: 200%;
                position: absolute;
                top: 0;
                left: 0;
                border-radius: inherit;
                transform: scale(0.5);
                transform-origin: 0 0;
                pointer-events: none;
                box-sizing: border-box;
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            }
        }
    }

    .list.horizontal {
        align-items: center;
        padding: 7px 0;
        background-color: white;

        .list-item {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            margin: 9px 0;

            .text {
                margin-top: 5px;
            }
        }

        .w-nav-3 {
            width: 33.3333%;
        }

        .w-nav-4 {
            width: 25%;
        }

        .w-nav-5 {
            width: 20%;
        }
    }
}
</style>
